<template>
    <div>
        <div class="avatar-div">
            <div class="avatar-title">头像上传：</div>
            <el-upload class="avatar-uploader" action="" :show-file-list="false" :auto-upload="false" :before-upload="beforeAvatarUpload" :on-change="handleFileChange" :http-request="uploadImage">
                <div v-if="fromData.avatarUrl" class="avatar-preview">
                    <!-- <img :src="fromData.avatarUrl" class="avatar" /> -->
                    <!-- <el-avatar :size="100" :src="fromData.avatarUrl" /> -->
                    <!-- <el-avatar :size="100" :src="fromData.avatarUrl" /> -->
                    <imageView @onImgUrlChange="onImgUrlChange" class="image-view" :imgUrl="fromData.avatarUrl"></imageView>
                    <div class="mask">
                        <el-icon><Edit /></el-icon>
                    </div>
                </div>
                <el-icon v-else class="plus-icon">
                    <Plus />
                </el-icon>
            </el-upload>

            <!-- <el-upload class="avatar-uploader" action="" :show-file-list="false" :auto-upload="false" :before-upload="beforeAvatarUpload" :on-change="handleFileChange" :http-request="uploadImage">
                <el-icon class="plus-icon"><Plus /></el-icon>
            </el-upload>
            <el-avatar :size="100" :src="fromData.avatarUrl" /> -->
        </div>
        <el-form :model="fromData" :rules="rules" class="form-div" label-width="auto" @validate="validate">
            <div>
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="用户昵称" prop="userName">
                            <el-input v-model="fromData.userName" />
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="在线文本" prop="onTextEditText">
                            <el-input v-model="fromData.onTextEditText" />
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="是否显示绿点" prop="isShowDian">
                            <el-radio-group v-model="fromData.isShowDian" @change="change">
                                <el-radio :value="1" size="large">显示</el-radio>
                                <el-radio :value="0" size="large">不显示</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-col>
                </el-row>
            </div>
        </el-form>
    </div>
</template>

<script setup>
import {reactive, ref} from "vue";
import {ElMessage} from "element-plus";
import {Plus, Edit} from "@element-plus/icons-vue";
import imageView from "./image-view.vue";

const fromData = ref({
    userName: "张三",
    onTextEditText: "当前在线",
    isShowDian: 1,
    avatarUrl: "",
    avatarUrl2: "",
});

const rules = reactive({
    userName: [{required: true, message: "请输入昵称", trigger: "change"}],
    onTextEditText: [{required: true, message: "请输入当前在线文本编辑", trigger: "change"}],
});

const emits = defineEmits(["onSelectChange"]);
const validate = (options) => {
    emits("onSelectChange", fromData.value);
};

const change = (options) => {
    emits("onSelectChange", fromData.value);
};

/**
 *  图片相关
 */
const onImgUrlChange = (previewUrl) => {
    // fromData.value.avatarUrl = previewUrl;
    fromData.value.avatarUrl2 = previewUrl;
    emits("onSelectChange", fromData.value);
};

const beforeAvatarUpload = (file) => {
    const isImage = file.type.startsWith("image/");
    const isLt2M = file.size / 1024 / 1024 < 2;
    if (!isImage) {
        ElMessage.error("只能上传图片文件");
        return false;
    }
    if (!isLt2M) {
        ElMessage.error("图片大小不能超过 2MB");
        return false;
    }
    return true;
};

const handleFileChange = (file) => {
    const reader = new FileReader();
    reader.onload = (e) => {
        fromData.value.avatarUrl = e.target.result;
        emits("onSelectChange", fromData.value);
    };
    reader.readAsDataURL(file.raw);
};

const uploadImage = ({file, onSuccess}) => {
    // 自定义上传逻辑，例如发送到服务器
    // 此处仅模拟上传成功
    setTimeout(() => {
        ElMessage.success("图片上传成功");
        onSuccess();
    }, 1000);
};
</script>

<style lang="scss" scoped>
.form-div {
    display: flex;
    .el-form-item {
        max-width: 300px;
        margin-left: 20px;
        margin-top: 15px;
        :deep(.el-form-item__label) {
            color: #333;
            font-size: 12px;
            font-weight: 500;
            display: flex;
            align-items: center;
            height: 100%;
        }
    }
    // .el-upload {
    //     width: 100%;
    //     height: 100%;
    // }
}
</style>

<style scoped>
.avatar-div {
    margin-top: 10px;
    display: flex;
    align-items: center;
    padding-left: 25px;
}
.avatar-title {
    color: #333;
    font-size: 12px;
    font-weight: 500;
    margin-right: 20px;
}
.avatar-uploader {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}
.avatar-uploader:hover {
    border-color: #409eff;
}
.avatar-preview {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.avatar {
    max-width: 100%;
    max-height: 100%;
}
.mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
}
.plus-icon {
    font-size: 24px;
    color: #8c939d;
}
.el-avatar {
    /* margin-left: 20px; */
}
</style>

<style>
.el-upload.el-upload--text {
    width: 100%;
    height: 100%;
}
</style>
